<template>

    <li>
        <label for="">
            <input type="checkbox" name="" id="" :checked="todo.done" @change="handleChecked(todo.id)">
            <span v-show="!todo.isEdit">{{todo.title}}</span>
            <input v-show="todo.isEdit" type="text" name="" id="" :value="todo.title" ref="inputTitle"
                @blur="handleBlur(todo,$event)">
        </label>
        <button class="btn btn-danger" @click="handleDeleted(todo.id)">删除</button>
        <button class="btn btn-edit" v-show="!todo.isEdit" @click="handleEdit(todo)">编辑</button>

    </li>

</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name: 'MyItem',
        props: ['todo'],
        methods: {
            handleChecked(id) {
                // this.$bus.emit('CheckTodo',id)
                pubsub.publish('CheckTodo', id)
            },
            handleDeleted(id) {
                if (confirm("确定删除吗？？")) {
                    // this.$bus.emit('deleteTodo',id)
                    pubsub.publish('deleteTodo', id)
                }
            },
            handleEdit(todo) {
                if (Object.hasOwnProperty.call(todo, 'isEdit')) {
                    todo.isEdit = true
                } else
                    this.$set(todo, 'isEdit', true)
                // pubsub.publish('handleEdit',id)
                // setTimeout(()=>{
                //     this.$refs.inputTitle.focus()
                // },200)
                this.$nextTick(() =>
                    this.$refs.inputTitle.focus()
                )
            },
            handleBlur(todo, e) {
                todo.isEdit = false
                if (!e.target.value.trim()) return alert('不能为空!!!')
                pubsub.pubsub('updateTodo', todo.id, e.target.value)
            }
        },
    }
</script>

<style scoped>
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;

    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }

    li:hover {
        background-color: #bfa;
    }

    li:hover button {
        display: block;
    }

    /* .todo-enter .todo-leave-to {
        transform: translateX(-100%);
    }

    .todo-enter-to .todo-leave {
        transform: translateX(0)
    } */

</style>